import { Component, OnInit,ViewChild,EventEmitter } from '@angular/core';
import { OfflineOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';
import {UploadOutput, UploadInput, UploadFile, humanizeBytes} from 'ngx-uploader';

declare var echarts;

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {

  @ViewChild('charts') chartsRef;
  title = 'app works!';
  baiduMapOptions;  // Baidu Map Options
  offlineOptions;  // Baidu Map Offline Options

  loadMap(event:any){
    console.log("map load",event);
  }
  clickMarker(event:any){
    console.log("click map maker", event);
  }

  clickmap(event){
    console.log("click map",event);
  }
  ngOnInit() {
    this.baiduMapOptions = {
            center: {
                longitude: 121.506191,
                latitude: 31.245554
            },
            zoom: 17,
            markers: [{
                longitude: 121.506191,
                latitude: 31.245554,
                title: 'Where',
                content: 'Put description here',
                enableDragging: true
            }],
            geolocationCtrl: {
                anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT
            },
            scaleCtrl: {
                anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
            },
            overviewCtrl: {
                isOpen: true
            },
            navCtrl: {
                type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
            }
        };
        this.offlineOptions = {
            retryInterval: 5000,
            txt: 'NO-NETWORK'
        };

    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
    
  }
  checked = false;

  public chartData = {
    theme: '',
    event: [
      {
        type: "click",
        cb: function (res) {
          console.log(res);
        }
      }
    ],
    title: {
      text: '某站点用户访问来源',
      subtext: '纯属虚构',
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [{
      name: '访问来源',
      type: 'pie',
      startAngle: -180,
      radius: '55%',
      center: ['50%', '60%'],
      data: [{
        value: 335,
        name: '直接访问'
      }, {
        value: 310,
        name: '邮件营销'
      }, {
        value: 234,
        name: '联盟广告'
      }, {
        value: 135,
        name: '视频广告'
      }, {
        value: 1548,
        name: '搜索引擎'
      }],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };

  public formData:FormData;
  files:UploadFile[];
  uploadInput:EventEmitter<UploadInput>;
  humanizeBytes:Function;
  dragOver:boolean;
  constructor(){
    this.files = [];
    this.uploadInput = new EventEmitter<UploadInput>();
    this.humanizeBytes = humanizeBytes;
  }

  onUploadOutput(output:UploadOutput):void{
    console.log(output);
    if(output.type === 'allAddedToQueue'){
      const event:UploadInput = {
        type:'uploadAll',
        url:'',
        method:'POST',
        data:{foo:'bar'},
        concurrency:0
      };
    }else if(output.type === 'addedToQueue'){
      this.files.push(output.file);
    }else if(output.type === 'uploading'){
      const index = this.files.findIndex(file => file.id === output.file.id);
      this.files[index] = output.file;
    }else if(output.type === 'removed'){
      this.files = this.files.filter((file:UploadFile)=>file !== output.file);
    }else if(output.type==='dragOver'){
      this.dragOver = true;
    }else if(output.type === 'dragOut'){
      this.dragOver = false;
    }else if(output.type === 'drop'){
      this.dragOver = false;
    }
  }

  startUpload():void{
    const event:UploadInput = {
      type:'uploadAll',
      url:'',
      method:'POST',
      data:{foo:'bar'},
      concurrency:1 // set sequential uploading of files with concurrency 1
    }
    this.uploadInput.emit(event);
  }
  cancelUpload(id:string):void{
    this.uploadInput.emit({type:'cancel',id:id});
  }

  ngAfterViewInit(){
    let mychart = echarts.init(this.chartsRef.nativeElement);
    mychart.setOption(this.chartData);
  }

}
